<template>
  <div class="brand w1160 white">
    <Title title="橙品牌" imgUrl="title-brand" width="391px" height="86px"></Title>
    <div class="brand-content">
      <ul class="flex jc-between">
        <li
          class="flexcenter"
          v-for="item in brandList"
          :key="item.title"
          :style="{
            background: `url(${$utils.getImg(item.liClassName)}) no-repeat center/cover`
          }"
        >
          <div class="list-item tc">
            <div class="img">
              <img :src="$utils.getImg(item.imgName)" width="90" height="90" :alt="item.imgName" />
            </div>
            <h1 class="fz28">{{ item.title }}</h1>
            <p class="des fz16">{{ item.text }}</p>
            <div class="btn">
              <BtnMore borderColor="#fff" :isOrange="false" color="#fff"></BtnMore>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import Title from './cq-title.vue'
import BtnMore from './btn-more.vue'
import { ref } from 'vue'
defineOptions({
  name: 'BrandPage',
  components: {
    Title,
    BtnMore
  }
})
const brandList = ref([
  {
    title: '橙营销1',
    text: '营销助力品牌升级1',
    liClassName: 'marketing',
    imgName: 'cyx'
  },
  {
    title: '橙营销2',
    text: '营销助力品牌升级2',
    liClassName: 'integral',
    imgName: 'cfl'
  },
  {
    title: '橙营销3',
    text: '营销助力品牌升级3',
    liClassName: 'marketing',
    imgName: 'cjr'
  },
  {
    title: '橙营销4',
    text: '营销助力品牌升级4',
    liClassName: 'welfare',
    imgName: 'cjf'
  }
])
</script>

<style lang="scss" scoped>
.brand {
  padding-top: 240px;
  padding-bottom: 148px;
  .brand-content {
    padding-top: 66px;
    .btn {
      opacity: 0;
    }
  }
  li {
    box-sizing: border-box;
    width: 280px;
    height: 400px;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      z-index: 1;
      transform: scale(1.15, 1.13);
      padding: 8px 7px;
      box-shadow: 0 0 8px rgba(88, 88, 88, 0.9) inset;
      .list-item {
        color: #fff;
        border: 1px solid #fff;
        background-color: rgba(255, 255, 255, 0);
      }
      .btn {
        opacity: 1;
      }
    }
  }
  .list-item {
    width: 100%;
    height: 100%;
    color: #dadada;
    background-color: rgba(0, 0, 0, 0.38);
    img {
      padding-top: 110px;
    }
    h1 {
      padding-top: 30px;
    }
    .des {
      padding-bottom: 24px;
    }
  }
}
</style>
